<template>
    <div>
        <el-card>
            <div slot="header">
                <span>用工管理</span>
            </div>
            <div class='toolsBar'>
                <el-row>
                    <el-col :span="8">
                        <span>年份：</span>
                        <el-select v-model='year' clearable  @change='getData'>
                            <el-option v-for='item in option' :key='item' :label='item' :value='item'></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row style='margin-top: 20px'>
                    <el-col :span="8">
                        <span>
                            合计金额：<span class='total'>{{total}}</span>&nbsp;元
                        </span>
                    </el-col>
                    <el-col :span="16">
                        <el-upload
                            style='float: right'
                            ref="upload"
                            action=""
                            :on-change="importExcel"
                            accept=".xlsx,.xls"
                            :show-file-list='false'
                            :auto-upload="false">
                            <el-button slot="trigger" style='float: right' type='primary' icon='el-icon-plus' @click=''>导入</el-button>
                        </el-upload>
                        <el-button style='float: right;margin-right: 10px' type='primary' icon='el-icon-download' @click='downloadTemplate'>下载导入模板</el-button>

                    </el-col>
                </el-row>

                <el-row style='margin-top: 20px'>
                    <el-table :data='tableData' stripe border>
                        <el-table-column label='序号' type='index' align='center'>
                            <template slot-scope='scope'>
                                {{scope.$index+1}}
                            </template>
                        </el-table-column>
                        <el-table-column label='用工类型' prop='type' align='center'></el-table-column>
                        <el-table-column label='次数' prop='num' align='center'></el-table-column>
                        <el-table-column label='金额（元）' prop='typeActualPaid' align='center'></el-table-column>
                        <el-table-column label='操作' width='100px' align='center'>
                            <template slot-scope='scope'>
                                <el-button type='text' @click='detail(scope.row)'>详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>


                <el-dialog width='80%' title='详情' :visible.sync='detailVisible'>
                    <el-table :data='detailTableData' stripe border>
                        <el-table-column label='时间' prop='createTime' align='center'></el-table-column>
                        <el-table-column label='园区' prop='park' align='center'></el-table-column>
                        <el-table-column label='姓名' prop='name' align='center'></el-table-column>
                        <el-table-column label='作业内容' prop='type' align='center'></el-table-column>
                        <el-table-column label='工人数量' prop='workerNum' align='center'></el-table-column>
                        <el-table-column label='工作时间（小时）' width='120' prop='workHours' align='center'></el-table-column>
                        <el-table-column label='时薪（元/小时）'  width='120' prop='workPrice' align='center'></el-table-column>
                        <el-table-column label='金额（元）' prop='money' align='center'></el-table-column>
                        <el-table-column label='代班费' prop='classFees' align='center'></el-table-column>
                        <el-table-column label='车费' prop='fare' align='center'></el-table-column>
                        <el-table-column label='人头费' prop='workerFare' align='center'></el-table-column>
                        <el-table-column label='工资调整' prop='salaryAdjustment' align='center'></el-table-column>
                        <el-table-column label='实发金额（元）' width='120' prop='actualPaid' align='center'></el-table-column>
                        <el-table-column label='备注' prop='remark' align='center'></el-table-column>
                    </el-table>
                    <el-pagination style='margin-top: 10px' :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalEle" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>
<script>
import axios from 'axios';
import { import_work, labor_group_detail, labor_group_list, labor_group_year } from '@/request/api';

export default {
    name: 'labor',
    data() {
        return {
            year:'',
            option:[],
            detailVisible:false,
            total:0,
            tableData:[],
            page:1,
            pageSize:10,
            totalEle:0,
            detailTableData:[],
            type:''
        }
    },
    mounted() {
        this.getTableData()
        this.getYearList()
    },
    methods:{
        getData(v){
            this.getTableData()
        },
        handleSizeChange(size){
            this.pageSize = size
            this.getDetailTable()
        },
        handleCurrentChange(page){
            this.page = page
            this.getDetailTable()
        },
        async getYearList(){
            const res = await labor_group_year()
            if(res.code == 200){
                this.option = res.data
            }else{
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            }
        },
        async getDetailTable(){
            let query = {
                type:this.type,
                page:this.page,
                pageSize:this.pageSize
            }
            const res = await labor_group_detail(query)
            if(res.code == 200){
                this.detailTableData = res.data.content
                this.totalEle = res.data.totalElements
            }
        },
         detail(params){
            this.detailVisible = true
             this.type = params.type
             this.getDetailTable()
        },
        async getTableData(){

            const res = await labor_group_list('?year='+this.year)
            if(res.code == 200){
                this.tableData = res.data.laborRecordList
                this.total = res.data.totalMoney
            }else{
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            }
        },
        //导入
        async importExcel(file){
            let formData = new FormData()
            formData.append('file',file.raw)
            const res = await import_work(formData)
            if(res.code == 200){
                this.$message({
                    message: '导入成功',
                    type: 'success'
                });
                this.getTableData()
            }else{
                this.$message({
                    message: '导入失败',
                    type: 'error'
                });
            }
        },
        //下载导入模板
        async downloadTemplate() {
            this.downloadFile('labor/exportLaborTemplate','用工管理模板')
        },
        //下载xlsx文件
        downloadFile(url,fileName){
            //由于之前的前端没有封装导入模板接口，所以只能用axios
            axios.get(localStorage.getItem('requestUrl')+url,{responseType:'arraybuffer'}).then(res=>{
                const blob = new Blob([res.data],{type:'application/vnd.ms-excel'})
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download',`${fileName}.xlsx`)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
                window.URL.revokeObjectURL(url)
                this.$notify({
                    title: '操作成功',
                    message: '下载成功',
                    type: 'success'
                })
            })
        },
    }
};
</script>

<style lang='less' scoped>
/deep/.el-upload--text{
    width: initial;
    height: initial;
    border:0;
    border-radius: initial;
}

 .total{
     color: rgb(187, 13, 13);
 }
</style>
